<template>
  <div>
    <div v-if="choose_type == 0">
      <header-tilte :title="title"></header-tilte>
      <mu-container class="flex_center simple_content">
        <mu-form ref="form" :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="72" style="height: 100%;">
          <div style="padding: 0.5rem;">
            <mu-form-item prop="shop_name" label="水店名称" style="text-align: left" :rules="shop_nameRules">
              <mu-text-field v-model="form.shop_name" placeholder="请输入水站名称" style="font-size: 0.8rem"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="boss_name" label="老板姓名" style="text-align: left" :rules="boss_nameRules">
              <mu-text-field v-model="form.boss_name" placeholder="请输入经营者姓名" style="font-size: 0.8rem"> </mu-text-field>
            </mu-form-item>
            <mu-form-item prop="verify" label="图形码" style="text-align: left" :rules="verifyRules">
              <mu-text-field v-model="form.verify" placeholder="验证码" style="font-size: 0.8rem"></mu-text-field>
              <div class="imgCodeBotton positon_ab">
                <img class="imgCodeUrl" :src="form.imgCodeUrl" @click="getCodeUrl">
              </div>
            </mu-form-item>
            <mu-form-item prop="shop_phone" label="手机号" style="text-align: left" :rules="shop_phoneRules">
              <mu-text-field v-model="form.shop_phone" placeholder="联系方式" style="font-size: 0.8rem"></mu-text-field>
              <div class="imgCodeBotton positon_ab">
                <mu-button color="primary" v-if="countDownTime <=0" @click="getCode()">获取动态码</mu-button>
                <mu-button disabled v-if="countDownTime >0">发送动态码({{countDownTime}}s)</mu-button>
              </div>
            </mu-form-item>
            <mu-form-item prop="captcha" label="动态码" style="text-align: left" :rules="captchaRules">
              <mu-text-field v-model="form.captcha"  placeholder="请填写手机验证码" style="font-size: 0.8rem"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="username" label="后台账号" style="text-align: left" :rules="usernameRules">
              <mu-text-field v-model="form.username"  placeholder="请填写手机号作为后台账号" style="font-size: 0.8rem"></mu-text-field>
            </mu-form-item>
            <div @click="toMapChooseAddress">
              <mu-form-item prop="area_info" label="所属区域" style="text-align: left" :rules="area_infoRules">
                <mu-text-field v-model="form.area_info" placeholder="请选择所属区域" style="font-size: 0.8rem"></mu-text-field>
              </mu-form-item>
            </div>
            <mu-form-item prop="address" label="详细地址" style="text-align: left" :rules="addressRules">
              <mu-text-field v-model="form.address" placeholder="请填写水站详细地址" style="font-size: 0.8rem"></mu-text-field>
            </mu-form-item>
          </div>
          <mu-button color="primary" style="width:100%;position: fixed;left: 0;right: 0;bottom: 0" @click="submit">保存</mu-button>
        </mu-form>
      </mu-container>
    </div>

    <map-choose-address  :mapAddress="mapAddress" :region="region" v-if="choose_type == 1" v-on:mapSearch="mapSearch" v-on:getMapAddress="getMapAddress" v-on:getregion="getregion"></map-choose-address>
    <search-address-list :mapAddress="mapAddress" :region="region" v-if="choose_type == 2" v-on:mapSearch="mapSearch" v-on:getMapAddress="getMapAddress" v-on:getregion="getregion"></search-address-list>

  </div>
</template>

<script>

    import HeaderTilte from "../components/headerTilte";
    import Rules from '../components/Rules';
    import MapChooseAddress from "../components/personal/components/MapChooseAddress";
    import SearchAddressList from "../components/personal/components/SearchAddressList";
    export default {
      components: {
        MapChooseAddress,
        SearchAddressList,
        HeaderTilte
      },
      name: "simple",
      data(){
          return{
            title:'快捷开店',
            choose_type:0,
            countDownTime:0,
            region:'',
            labelPosition: 'left',
            form: {
              shop_name: '',
              boss_name:'',
              verify:'',
              shop_phone:'',
              username:'',
              area_info:'',
              address:'',
              imgCodeUrl:'',
              province:'',
              city:'',
              area:'',
              aid:'',
              area_position:''
            },
            mapAddress:{
              area_position:'',//经纬度-字符串
              area_info:'',//省市区
              address:'',//详细地址
              province_id:'',
              city_id:'',
              area_id:'',
            },
            shop_nameRules: [
              { validate: (val) => !!val, message: '请输入水站名称'},
              { validate: (val) => val.length <=15, message: '水站名称长度小于15'}
            ],
            boss_nameRules: [
              { validate: (val) => Rules.required(val), message: '请输入经营者姓名'},
              { validate: (val) => val.length <=5, message: '经营者姓名长度小于5'}
            ],
            verifyRules :[
              { validate: (val) => Rules.required(val), message: '请填写图形验证码'},
            ],
            shop_phoneRules:[
              { validate: (val) => Rules.required(val), message: '请输入联系方式'},
              { validate: (val) => Rules.phone(val), message: '手机号格式错误'},
            ],
            captchaRules: [
              { validate: (val) => Rules.required(val), message: '请填写手机验证码'},
            ],
            usernameRules: [
              { validate: (val) => Rules.required(val), message: '请填写手机号作为后台账号'},
              { validate: (val) => val.length >=3 && val.length <=20, message: '账号长度，应为3-20个字符'}
            ],
            area_infoRules: [
              { validate: (val) => Rules.required(val), message: '请选择所属区域'},
            ],
            addressRules: [
              { validate: (val) => Rules.required(val), message: '请填写水站详细地址'},
            ],

          }
      },
      mounted(){
        this.initH();
        this.form.imgCodeUrl = this.yesS.getCodeImg + 'client/captcha';
        this.form.aid = this.$route.query.admin_id;
      },
      methods:{
        initH(){
          var headerH = $('.header').outerHeight(true);
          var allH = document.documentElement.clientHeight;
          var footH = $('button').height();
          var h = allH-headerH-footH;
          $('.simple_content').css('height',h+'px');
        },
        submit () {

          this.$refs.form.validate().then((result) => {
            if(result == true){//验证通过
              console.log(this.form)
              this.yesS.shopSimple(
                this.$combineParams({
                  shop_name: this.form.shop_name,
                  boss_name:this.form.boss_name,
                  verify:this.form.verify,
                  shop_phone:this.form.shop_phone,
                  username:this.form.username,
                  area_info:this.form.area_info,
                  address:this.form.address,
                  province:this.form.province,
                  city:this.form.city,
                  area:this.form.area,
                  aid:this.form.aid,
                  area_position:this.form.area_position
                })
              ).then(res => {
                this.deleteCache('form');
                var status = res.status;
                if(status == 1){
                  this.$router.push({
                    path:'/qds/Success',
                    query:{toType:5}
                  })
                }
              })
            }
          });
        },
        getCode(){

          //判断mobile 和 imgCode 是否填写
          if(this.isEmpty(this.form.imgCode)){
            this.$toast.warning('请填写图形码');
            return;
          }
          if(this.isEmpty(this.form.mobile)){
            this.$toast.warning('请填写手机号');
            return;
          }
          var _self = this;
          //生成倒计时
          this.yesS.getSms(
            this.$combineParams({
              mobile: this.form.mobile,
              type:2,
              verify:_self.form.imgCode
            })
          ).then(res => {
            var status = res.status;
            if(status == 1){
              //生成倒计时
              _self.countDownTime = 60;
              var intervarId = setInterval(function () {
                _self.countDownTime--;
                if(_self.countDownTime <= 0){
                  clearInterval(intervarId);
                }
              }, 1000);
            }
          })
        },
        getCodeUrl(){
          $('.imgCodeUrl').attr('src',this.yesS.getCodeImg + 'client/captcha');
        },

        // 省市区三级联动
        selected(data){
          this.mask =false;
          this.addInp = false;
          this.form.area_info = data.province.value + ' ' + data.city.value +' ' + data.area.value;
          this.form.province = data.province.code
          this.form.city = data.city.code;
          this.form.area = data.area.code;
          this.showShade = false;

        },

        toMapChooseAddress(){
          this.choose_type = 1;
        },

        //显示哪个页面 0主页面 1地图页面 2地址搜索页面
        mapSearch: function (childValue) {
          // childValue就是子组件传过来的值
          this.choose_type = childValue;
        },
        //获取地图或地址搜索页面的相关信息
        getMapAddress:function (childValue) {
          // childValue就是子组件传过来的值
          this.mapAddress = childValue;
          this.form.province_id = this.mapAddress.province_id;
          this.form.city_id = this.mapAddress.city_id;
          this.form.area_id = this.mapAddress.area_id;
          this.form.area_info = this.mapAddress.area_info;
          this.form.address = this.mapAddress.address;
          this.form.area_position = this.mapAddress.area_position;
          console.log(this.form);


        },

        //获取当前所在市
        getregion:function (childValue) {
          this.region = childValue;
        }

      },
      computed:{
        userNameValue(){
          return this.form.shop_phone;
        }
      },
      watch:{
        userNameValue(val,oldVal){
          this.form.username = val;
        }
      },

    }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  .mu-demo-form {
    width: 100%;
    max-width: 460px;
  }
  .simple_content{
    overflow: hidden;
    overflow-y: auto;
  }
  .mu-text-field-input{
    font-size: 0.9rem!important;
  }

  .imgCodeBotton{
    right: 0;
    bottom: 10px;
  }

  .imgCodeBotton img{
    width: 7rem;
    height: 2.5rem;
  }

  .myAddress{
    width: 100%;
    background-color: white;
    border-top: 4px solid rgba(245,245,245,1);
    color:#333;
  }
  .myAddress .cont{
    border-bottom: 1px solid rgba(245,245,245,0.8);
  }
  .myAddress .cont span{
    display: inline-block;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.88rem;
    margin-left: 0.32rem;
  }
  .myAddress .cont section{
    float:left;
  }
  .myAddress .cont p{
    display: inline-block;
    font-size: 0.28rem;
    color: #333333;
    line-height: 0.88rem;
    margin-left: 1rem;
  }
  .myAddress .cont .pic2{
    float: right;
    width: 0.14rem;
    height: 0.24rem;
    margin: 0.32rem 0.32rem 0.32rem 0;
  }
  .myAddress .cont p.text{
    margin-left: 0.72rem;
  }
  .showChose{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:120;
    background:rgba(77,82,113,0.8);
  }
  .address{
    position:absolute;
    bottom:0;
    left:0;
    z-index:121;
    background:#fff;
    width:100%;
  }
  .title h4{
    display:inline-block;
    margin-left:3.2rem;
    font-size:0.32rem;
    line-height:0.88rem;
    font-weight:normal;
    color:#999;
  }
  .title span{
    margin:0.42rem 0 0 2.2rem;
    font-size:0.45rem;
    line-height:0.34rem;
    color:#D8D8D8;
  }
  .area{
    display:inline-block;
    font-size:0.24rem;
    line-height:0.88rem;
    margin-left:0.42rem;
    color:#333;
  }
  .addList{
    width:100%;
    padding-left:0.32rem;
    font-size:0.34rem;
    line-height:0.88rem;
    color:#333;
  }
  /* 修改的格式 */
  .address ul{
    width:95%;
    height:100%;
    max-height: 4.4rem;
    overflow:auto;
  }
  .address ul li{
    margin-left:5%;
  }
  .address .title .active{
    color:#0071B8;
    border-bottom:0.02rem solid #0071B8;
  }
  .address ul .active{
    color:#0071B8;
  }

  .simple_choose{
    height: 300px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
    background: #fff;
  }


</style>
